<script setup>

import {ref,onMounted} from "vue";
import TagBaseWord from "@/components/PhraseItComp/TagBaseWord.vue";

let theTest = ref();
// 使用节流函数来控制事件处理程序的执行频率
//这里的意思，limit时间内触发同样事件，不做反应。代表反应灵敏度
function throttle(func, limit) {
  let inThrottle;
  return function() {
    // console.log("event happening");
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 在鼠标悬停时触发的事件处理程序
function handleHoverEvent() {
  // 在这里放置你的鼠标悬停事件处理逻辑
  console.log('Mouse hover event occurred');
}

// 将节流应用于鼠标悬停事件处理程序
//这里的意思，limit事件触发同样事件，不做反应
const throttledHoverHandler = throttle(handleHoverEvent, 2000); // 这里的100表示毫秒
onMounted(()=>{
  // console.log("theTest.addEventListener:",theTest.value.$el);
  console.log("theTest.addEventListener:",theTest.value.addEventListener);
  // 添加事件监听器来触发节流处理程序
  theTest.value.addEventListener('mousemove', throttledHoverHandler);
  // theTest.value.addEventListener('mouseenter', throttledHoverHandler);
  // document.addEventListener()
})


</script>

<template>
  <div ref="theTest"> test here</div>
<!--  <el-text ref="theTest"> test here</el-text>-->
</template>

<style scoped>

</style>